<template>
  <div class="accessAddOrEdit">
    <el-form class="m7-form accessForm" :rules="rules"
      size="mini" :model="accessForm"
      ref="accessForm" label-position="top">
      <!-- 基本信息 -->
      <div v-show="type === 'basic'">
        <div class="tip">
          <span class="el-icon-info"></span>
          登录企业微信管理后台-我的企业-企业信息，把对应信息填入下方
        </div>
        <el-form-item label="企业微信名称" prop="name">
          <el-input v-model.trim="accessForm.name" placeholder="请输入企业微信后台-我的企业-企业信息-企业简称 字段" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="企业微信ID" prop="corpId">
          <el-input :disabled="accessForm._id !==''" v-model.trim="accessForm.corpId"
           placeholder="请输入企业微信后台-我的企业-企业信息-企业ID 字段" size="mini">
          </el-input>
        </el-form-item>
        <div class="tip">
          <span class="el-icon-info"></span>
          登在企业微信管理后台-应用管理-自建应用中创建自建应用，并获取该应用的Agentld和Secret
        </div>
        <el-form-item label="AgentId" prop="agentId">
          <el-input :disabled="accessForm._id !==''" v-model.trim="accessForm.agentId"
           placeholder="请输入企业微信后台—应用管理-自建应用-AgentId 字段" size="mini">
          </el-input>
        </el-form-item>
        <el-form-item label="Secret" prop="appSecret">
          <el-input :disabled="accessForm._id !==''" v-model.trim="accessForm.appSecret"
           placeholder="请输入企业微信后台—应用管理-自建应用-Secret 字段" size="mini">
          </el-input>
        </el-form-item>
        <el-form-item label="会话流程" prop="processId">
          <m7Select filterable
          v-model="accessForm.processId"
          size="mini" :options="processData"
          :defaultProps="{value: '_id', label: 'name'}"
          placeholder="请选择">
          </m7Select>
        </el-form-item>
        <el-form-item label="满意度评价" prop="isSatisfaction">
          <el-switch
            v-model="accessForm.isSatisfaction"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
        <el-form-item prop="openAssistance">
          <span slot="label">
            启用智能辅助
          </span>
          <el-switch
            v-model="accessForm.isEnableRobotAssist"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
      </div>
      <!-- 其他信息 -->
      <div v-show="type === 'otherInfo'">
        <h4 class="title">第一步：</h4>
        <p style="marginBottom: 10px">将生成的URL地址、Token、EncodingAESKey复制到企业微信应用后台：“接收消息”—>“设置API接收”—>“接收消息服务器配置”中</p>
        <el-form-item label="URL服务地址" prop="severUrl">
          <el-input v-model.trim="accessForm.severUrl" :disabled="true" size="mini">
            <i slot="suffix" class="V7_iconfont V7_iconV7tubiao_fuzhi" @click="copyText(accessForm.severUrl)"></i>
          </el-input>
        </el-form-item>
        <el-form-item label="Token(令牌)" prop="token">
          <el-input v-model.trim="accessForm.token" :disabled="true" size="mini">
            <i slot="suffix" class="V7_iconfont V7_iconV7tubiao_fuzhi" @click="copyText(accessForm.token)"></i>
          </el-input>
        </el-form-item>
        <el-form-item label="EncodingAESKey" prop="encodingAESKey">
          <el-input v-model.trim="accessForm.encodingAESKey" :disabled="true" size="mini">
            <i slot="suffix" class="V7_iconfont V7_iconV7tubiao_fuzhi" @click="copyText(accessForm.encodingAESKey)"></i>
          </el-input>
        </el-form-item>
        <h4 class="title">第二步：</h4>
        <p style="marginBottom: 10px">选择需要接收的消息事件类型仅勾选：用户发送的普通消息和自定义菜单操作</p>
      </div>
    </el-form>
  </div>
</template>
<script lang='ts'>
import Clipboard from 'clipboard-js'
import { Component, Vue, Prop } from 'vue-property-decorator'
import { deepClone } from '@/utils/common'
import funTab from '@/components/cardLayout/FunTab.vue'
interface AccessForm {
  name: string
  processId: string
  _id?: string
  token: string
  corpId: string
  agentId: string
  appSecret: string
  severUrl: string
  encodingAESKey: string
  isSatisfaction: boolean
  satisfactionId: string
  isEnableRobotAssist: boolean // 启用智能辅助
}
const accessFormTem = {
  _id: '',
  name: '',
  processId: '',
  corpId: '',
  agentId: '',
  appSecret: '',
  severUrl: '',
  token: '',
  encodingAESKey: '',
  isSatisfaction: false,
  satisfactionId: '',
  isEnableRobotAssist: false
}
@Component({
  name: 'wechatAppAccessAddOrEdit',
  components: {
    funTab
  }
})
export default class WechatAppAccessAddOrEdit extends Vue {
  @Prop() private activeName: string|undefined
  private $store: any
  private $bus: any
  private $message: any

  get type () {
    return this.activeName
  }

  get processData () {
    return this.$store.state.common.publicCache.processList || []
  }

  private rules = {
    name: [{ required: true, trigger: 'blur', message: '请输入企业微信名称' }],
    corpId: [{ required: true, trigger: 'blur', message: '请输入appId' }],
    agentId: [{ required: true, trigger: 'blur', message: '请输入AgentId' }],
    appSecret: [{ required: true, trigger: 'blur', message: '请输入Secret' }],
    processId: [{ required: true, trigger: 'change', message: '请选择会话流程' }]
  }

  public accessForm: AccessForm = {
    name: '',
    processId: '',
    severUrl: '',
    corpId: '',
    agentId: '',
    appSecret: '',
    token: '',
    encodingAESKey: '',
    isSatisfaction: false,
    satisfactionId: '',
    isEnableRobotAssist: false
  }

  public setAccessData (data?: any) {
    if (data) {
      const { name, severUrl, satisfactionId, processId, _id, agentId, corpId, appSecret, token, encodingAESKey, isSatisfaction, isEnableRobotAssist } = data
      this.accessForm = {
        _id,
        name,
        corpId,
        processId,
        agentId,
        appSecret,
        severUrl,
        token,
        encodingAESKey,
        isSatisfaction: isSatisfaction === undefined ? false : isSatisfaction,
        satisfactionId: satisfactionId || this.accessForm.satisfactionId,
        isEnableRobotAssist
      }
    } else {
      this.accessForm = deepClone(accessFormTem)
    }
  }

  private copyText (content: string) { // 复制
    Clipboard.copy(content).then(() => {
      this.$message.success('复制成功')
    }).catch(() => {
      this.$message.error('复制失败')
    })
  }

  private mounted () {
    this.$bus.$on('eprWebchatSave', (res: any) => {
      this.setAccessData(res)
    })
  }

  private beforeDestroy () { // 组件销毁时，清除定时器和事件总线
    this.$bus.$off('eprWebchatSave')
  }
}
</script>
<style lang="stylus" scoped>
  .accessAddOrEdit
    .V7_iconfont
      cursor pointer
    p
      color #686E84
    .tip
      padding 10px
      line-height 16px
      background #E5F3FD
      border-radius 4px
      color #303753
      margin-bottom 12px
      .el-icon-info
        color #008BEE
        margin-right 5px
    .title
      font-size 12px
    .V7_iconV7tubiao_fuzhi
      font-size 12px
    .tip-span
      font-size 12px
      color #B3B9C7
      cursor pointer
</style>
